import React, {useEffect} from 'react';
import {Space, Table, TreeSelect} from "antd";
import {useAppDispatch} from "@/hooks";
import {
  changeDepcode,
  getHospitalDepartmentAsync,
  getHospitalScheduleRuleAsync,
  useSelectorHospList
} from "@/store/slice/hospList";
import {useParams} from "react-router-dom";

const { TreeNode } = TreeSelect;
function Department() {
  const dispatch = useAppDispatch()
  const {hoscode} = useParams()
  const {pageInfoRule} = useSelectorHospList()
  const {departmentList}  = useSelectorHospList()
  const {bookingScheduleList} = useSelectorHospList()
  const {depcode} =useSelectorHospList()
// console.log(departmentList)
  console.log(bookingScheduleList)
  useEffect(()=>{
    dispatch(getHospitalDepartmentAsync(hoscode))
  },[])
  if(departmentList.length>=0) {
    return (
      <Space  size="middle" direction="vertical" style={{ width: "100%" }}>
        <TreeSelect
          showSearch
          style={{width: '100%'}}
          dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
          placeholder="请输入医院科室"
          allowClear
          filterTreeNode={(inputValue: string, treeNode: any) => {
            return treeNode.title.includes(inputValue)
          }}
          onChange={(code) => {
            dispatch(changeDepcode(code))
            dispatch(getHospitalScheduleRuleAsync(1,5,hoscode as string,code))
          }}
        >
          {
            departmentList.map((item: any) => {
              return (
                <TreeNode key={item.depcode} value={item.depcode} title={item.depname}>
                  {
                    item.children.map((item: any) => {
                      return (
                        <TreeNode key={item.depcode} value={item.depcode}
                                  title={item.depname}/>
                      )
                    })
                  }
                </TreeNode>
              )
            })
          }
        </TreeSelect>
        <Table
          rowKey={"workDate"}
          pagination={{
            ...pageInfoRule,
            onChange(current,pageSize){
              dispatch(getHospitalScheduleRuleAsync(current,pageSize,hoscode as string,depcode))
            }
          }}
          bordered={true}
          columns={[
            {
              title:"序号",
              align:"center",
              render(value,rows,index){
                return (pageInfoRule.current-1)*pageInfoRule.pageSize+index+1;
              }
            },{
              title:"医师数量",
              align:"center",
              dataIndex:"docCount"
            }
            ,{
              title:"号源时间",
              align:"center",
              dataIndex:"workDate"
            }
            ,{
              title:"预约总数",
              align:"center",
              dataIndex:"reservedNumber"
            },{
              title:"剩余预约数",
              align:"center",
              dataIndex:"availableNumber"
            }
          ]}
          dataSource={bookingScheduleList}
        ></Table>
      </Space>
    )
  }


}

export default Department;